<!doctype html>
<html class="no-js">

<head>
    <title>幼儿园</title>
    <#include "/boya/template/meta.html" />
</head>

<body>
    <#import "/boya/template/marc.html" as mc />
    <@mc.content>
        <div id="app" class="page">
            <div class="title">食品及原料配送记录 / <span v-if="info.id == ''">新增记录</span><span v-else>编辑记录</span> /</div>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">检验时间 <span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请输入检验时间" id="datepicker" class="layui-input" v-model="info.date">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">检验员 <span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请输入检验员" autocomplete="off" class="layui-input" v-model="info.operator">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">检验产品 <span style="color: red;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" placeholder="请输入检验产品" autocomplete="off" class="layui-input" v-model="info.name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">检查结果</label>
                    <div class="layui-input-block">
                        <input type="radio" v-model="info.result" name="result" :value="1" title="合格" lay-filter="reportResult" />
                        <input type="radio" v-model="info.result" name="result" :value="2" title="不合格" lay-filter="reportResult" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">检验报告</label>
                    <div class="layui-input-block">
                        <div class="file-item" v-if="filename != ''">
                            <a :href="info.attachment"><i class="am-icon-file-o"></i>&nbsp;{{ filename }}</a>
                            <div class="am-fr file-item-del" @click="delFile">
                                <i class="am-icon-trash"></i>
                            </div>
                        </div>
                        <button type="button" class="layui-btn" id="uploadBtn" v-else>
                            <i class="layui-icon">&#xe67c;</i>上传文件
                        </button>
                    </div>
                </div>
            </form>
            <div class="submit-wrap">
                <button class="am-btn am-btn-primary" @click="submit">确定</button>
            </div>
        </div>
    </@mc.content>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                info: {
                    id: '',
                    date: this.dateFtt("yyyy-MM-dd", new Date()),
                    operator: '',
                    name: '',
                    result: '',
                    attachment: ''
                },
                filename: ''
            }
        },
        mounted: function() {
            var self = this;
            var infoJsonStr = '${info!}';
            if (infoJsonStr != '') {
                var obj = JSON.parse(infoJsonStr);
                self.info.id = obj.id;
                self.info.date = obj.date;
                self.info.operator = obj.operator;
                self.info.name = obj.name;
                self.info.result = obj.result;
                self.info.attachment = obj.attachment;
            }
            if (self.info.attachment && self.info.attachment != '') {
                self.filename = self.info.attachment.split("=")[1];
            }
            layui.use('form', function() {
                layui.form.on('radio(reportResult)', function(data) {
                    self.info.result = data.value;
                });
            });
            layui.use('laydate', function() {
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#datepicker',
                    format: 'yyyy-MM-dd',
                    done: function(value, date, endDate) {
                        self.info.date = value;
                    }
                });
            });
            layui.use('upload', function() {
                var upload = layui.upload;

                //执行实例
                var uploadInst = upload.render({
                    elem: '#uploadBtn', //绑定元素
                    url: '/boya/api/uploadFile', //上传接口
                    accept: 'file',
                    done: function(res) {
                        self.filename = res.info.split("=")[1];
                        self.info.attachment = res.info;
                    },
                    error: function() {
                        msg("上传失败");
                    }
                });
            });
        },
        methods: {
            submit() {
                var self = this;
                if (self.info.date == '') {
                    msg("请选择检验时间");
                    return;
                }
                if (self.info.operator == '') {
                    msg("请输入检验员");
                    return;
                }
                if (self.info.name == '') {
                    msg("请输入检验产品");
                    return;
                }
                var map = {
                    date: self.info.date,
                    operator: self.info.operator,
                    name: self.info.name,
                    result: self.info.result,
                    attachment: self.info.attachment
                }
                if (self.info.id != '') {
                    map['id'] = self.info.id;
                }
                var param = Qs.stringify(map);
                axios({
                        url: '/boya/submitReport',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        if (response.data.status == 200) {
                            window.location.href = "/boya/reportList";
                        } else {
                            msg("保存失败：" + response.data.msg);
                            console.log(response.data);
                        }
                    })
                    .catch(function(error) {
                        msg("保存失败");
                        console.log(error);
                    });
            },
            delFile(index) {
                var self = this;
                confirm("确认删除？", function() {
                    self.info.attachment = '';
                })
            },
            dateFtt(fmt, date) {
                var o = {
                    "M+": date.getMonth() + 1, //月份
                    "d+": date.getDate(), //日
                    "h+": date.getHours(), //小时
                    "m+": date.getMinutes(), //分
                    "s+": date.getSeconds(), //秒
                    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }
        }
    })
    </script>
    <style type="text/css">
    .page {
        padding: 15px;
    }

    .title {
        margin-bottom: 3rem;
        font-size: 1.2em;
    }

    .layui-form-label {
        width: 110px;
    }

    .file-item {
        padding: 1rem;
    }

    .file-item .file-item-del {
        color: red;
        cursor: pointer;
    }

    .submit-wrap {
        padding-left: 110px;
    }
    </style>
</body>

</html>